<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="320"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;

        // Helper to draw the resistor box
        function drawResistorBox(x, y, w, h) {
            ctx.fillStyle = 'white';
            ctx.fillRect(x, y - h / 2, w, h);
            ctx.strokeRect(x, y - h / 2, w, h);
        }
        
        // Helper to draw the battery symbol as in the image (4 cells)
        function drawBattery(x, y, totalWidth, cellHeight) {
            const numCells = 4;
            const cellStep = totalWidth / numCells;
            const longLineHeight = cellHeight;
            const shortLineHeight = cellHeight * 0.6;
            
            ctx.beginPath();
            let currentX = x;

            for (let i = 0; i < numCells; i++) {
                // Long line (positive)
                ctx.moveTo(currentX, y - longLineHeight / 2);
                ctx.lineTo(currentX, y + longLineHeight / 2);
                currentX += cellStep / 2;
                // Short line (negative)
                ctx.save();
                ctx.lineWidth = 3.5;
                ctx.moveTo(currentX, y - shortLineHeight / 2);
                ctx.lineTo(currentX, y + shortLineHeight / 2);
                ctx.restore();
                if (i < numCells - 1) {
                   currentX += cellStep / 2;
                }
            }
            ctx.stroke();
        }

        // --- Main Drawing ---
        
        // Coordinates and dimensions
        const batY = 60;
        const batX_start = 220;
        const bat_width = 70;
        const batX_end = batX_start + bat_width;
        
        const juncB_x = 100;
        const juncG_x = 400;
        const juncY = 160;

        const res_x1 = 150;
        const res_x2 = 350;
        const res_y1 = 130;
        const res_y2 = 190;
        const res_w = res_x2 - res_x1;
        const res_h = 20;

        // Draw all wires first
        ctx.beginPath();
        // Top section
        ctx.moveTo(batX_start, batY); ctx.lineTo(juncB_x, batY); ctx.lineTo(juncB_x, juncY);
        ctx.moveTo(batX_end, batY); ctx.lineTo(juncG_x, batY); ctx.lineTo(juncG_x, juncY);
        
        // Parallel block wiring
        // Left side
        ctx.moveTo(juncB_x, juncY); ctx.lineTo(res_x1, juncY);
        ctx.moveTo(res_x1, juncY); ctx.lineTo(res_x1, res_y1); // Up to top resistor line
        ctx.moveTo(res_x1, juncY); ctx.lineTo(res_x1, res_y2); // Down to bottom resistor line
        
        // Right side
        ctx.moveTo(res_x2, res_y1); ctx.lineTo(res_x2, juncY);
        ctx.moveTo(res_x2, res_y2); ctx.lineTo(res_x2, juncY);
        ctx.moveTo(res_x2, juncY); ctx.lineTo(juncG_x, juncY);
        
        // Horizontal lines for resistors
        ctx.moveTo(res_x1, res_y1); ctx.lineTo(res_x2, res_y1);
        ctx.moveTo(res_x1, res_y2); ctx.lineTo(res_x2, res_y2);
        
        ctx.stroke();

        // Draw components on top of wires
        drawBattery(batX_start, batY, bat_width, 30);
        drawResistorBox(res_x1, res_y1, res_w, res_h);
        drawResistorBox(res_x1, res_y2, res_w, res_h);
        
        // Draw all text labels
        ctx.fillStyle = 'black';
        ctx.font = '18px Arial';
        
        // Resistor values
        ctx.textAlign = 'center';
        ctx.fillText('3.0 Ω', (res_x1 + res_x2) / 2, res_y1 - res_h/2 - 8);
        ctx.fillText('6.0 Ω', (res_x1 + res_x2) / 2, res_y2 + res_h/2 + 18);
        
        // Point labels
        ctx.textBaseline = 'middle';
        ctx.font = 'bold 18px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('A', batX_start-15, batY);
        ctx.fillText('H', batX_end+15, batY);
        
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'right';
        ctx.fillText('B', juncB_x - 8, juncY);
        ctx.fillText('C', res_x1 - 8, res_y1);
        ctx.fillText('E', res_x1 - 8, res_y2);
        
        ctx.textAlign = 'left';
        ctx.fillText('G', juncG_x + 8, juncY);
        ctx.fillText('D', res_x2 + 8, res_y1);
        ctx.fillText('F', res_x2 + 8, res_y2);
        
        // Figure label
        ctx.font = 'bold 20px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 9.1', 250, 290);
    </script>
</body>
</html>